<template>
  <view>
    <view class="tab-box">
      <view
          class="tab-item"
          @click="chooseTab(index)"
          :class="{ active: index === currentTab }"
          v-for="(item, index) in tabList"
          :key="index"
      >
        {{ item[labelKey] }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "baseTab",
  props: {
    tabList: {
      type: Array,
      default: () => [],
    },
    labelKey: {
      type: String,
      default: "label",
    },
    tabIndex: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      currentTab: this.tabIndex,
    };
  },
  methods: {
    chooseTab(index) {
      this.currentTab = index;
      this.$emit("chooseTab", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-box {
  display: flex;
  align-items: center;
  gap: 4px;
  //margin-bottom: 30rpx;
  margin: 10px 0;
  //border-bottom: 1rpx solid #eee;

  .tab-item {
    //flex: 1;
    //position: relative;
    top: 4rpx;
    line-height: 37rpx;
    padding: 0 0 15rpx;
    text-align: center;
    color: rgba(144, 143, 171, 1);
  }

  .active {
    color: #0f5eee;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    //border-bottom: 6rpx solid #0f5eee;
  }
}
</style>
